<template>
    <div class="file">
        <input type="file" name="file" id="file" /><br/>
        <div id="picBox">
            <img src="" width="300" height="200" id="img"/>
        </div>
    </div>
</template>
<script>
import {addimgfile} from 'api/article'
export default {
    data(){
        return {
            imgbetea64:"",
            imgUrl: this.value
        }
    },
    // props:{
    //     value: String
    // },
    methods:{

        getimgfile(){

            let _self = this;
            var flObj=document.getElementById("file");

            flObj.onchange=function(){
                var file=flObj.files[0];               //因为每次只上传了一张图片，所以获取到flObj.files[0];    
                var fReader=new FileReader();		
                if(file.type.indexOf("image")!=-1){    //判断文件类型是否为image
                    fReader.readAsDataURL(file);		// 将文件读取为DataURL
                    fReader.onload=function(e){
                        _self.imgbetea64 = this.result;
                        document.getElementById("img").src= this.result;
                        _self.upimg();
                    }
                }
            }
        },
        upimg(){
            let data = {
                imgfiles: this.imgbetea64
            }
            addimgfile(data).then(res=>{
                this.$emit("getImgUrl",res.imageUrl);
            });
        }
    },
    mounted(){
        this.getimgfile();
    }
}
</script>

